/**
* Created by ren on 2017/1/6.
*/
<template>
  <div class='looseDetail'>
    <template v-if="detailData!==''&&detailData.content.length>0">
      <ul class="head">
        <li>类型</li>
        <li>金额</li>
        <li>日期</li>
      </ul>
      <ul class="body">
        <li v-for="(item,index) in detailData.content">
          <div v-if="item.tradeType===0">充值记录</div>
          <div v-if="item.tradeType===1">提现记录</div>
          <div v-if="item.tradeType===2">存黄金（买金生金）</div>
          <div v-if="item.tradeType===3">定投消费</div>
          <div v-if="item.tradeType===4">商城消费</div>
          <div v-if="item.tradeType===5">金生金到期收益</div>
          <div v-if="item.tradeType===6">定投提取</div>
          <div v-if="item.tradeType===7">金生金提取</div>
          <div v-if="item.tradeType=='0'||item.tradeType=='5'"
               :class="{cz:item.tradeType==='1',xf:item.tradeType=='0',tx:item.tradeType=='2',jd:item.tradeType=='3',sy:item.tradeType=='4'}">
            +{{(item.tradeMoney/100).toFixed(2)}}
          </div>
          <div v-else
               :class="{cz:item.tradeType==='1',xf:item.tradeType=='0',tx:item.tradeType=='2',jd:item.tradeType=='3',sy:item.tradeType=='4'}">
            -{{(item.tradeMoney/100).toFixed(2)}}
          </div>
          <div>{{item.createTime}}</div>
        </li>
      </ul>
      <div class="paging-wrap">
        <div class="paging" v-if="detailData!==''&&detailData.totalPages>1">
          <img src="../../assets/prev.png" style="float: left;margin-top: 23px;cursor: pointer" @click="prev">
          <div class="page" style="float: left">
            <div v-for="(item,index) in detailData.totalPages"
                 v-if="detailData.totalPages<11"
                 :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
            </div>
            <template v-if="detailData.totalPages>10">
              <template v-if="detailData.totalPages-10<nextPage">
                <div v-for="(item,index) in detailData.totalPages"
                     v-if="index>detailData.totalPages-10"
                     :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                </div>
              </template>
              <template v-else>
                <div v-for="(item,index) in detailData.totalPages"
                     v-if="index>nextPage-1&&index<nextPage+4"
                     :class="{active:index===nextPage}"
                     @click="paging(index)">{{index+1}}
                </div>
                <div>…</div>
                <div v-for="(item,index) in detailData.totalPages"
                     v-if="index>detailData.totalPages-5"
                     :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                </div>
              </template>
            </template>
          </div>
          <img src="../../assets/next.png" style="float: left;margin-top: 23px;cursor: pointer" @click="next">
          <div class="total">共{{detailData.totalPages}}页</div>
        </div>
      </div>
    </template>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  export default {
    name: 'looseDetail',
    components: {
      Notify
    },
    data: function () {
      return {
        notifyStatus: 2,
        detailData: '',
        nextPage: 0
      }
    },
    props: ['_parentThis'],
    methods: {
      paging: function (page) {
        this.nextPage = page
        this.findTradeDetail()
      },
      prev: function () {
        if (this.nextPage > 0) {
          this.nextPage = this.nextPage - 1
          this.findTradeDetail()
        }
      },
      next: function () {
        if (this.nextPage < this.detailData.totalPages - 1) {
          this.nextPage = this.nextPage + 1
          this.findTradeDetail()
        }
      },
      findTradeDetail: function () {
        this.$http.post(API.findTradeDetail, {
          userId: this.$cookie.get('id'),
          nextPage: this.nextPage,
          pageSize: 5
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.detailData = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      this.findTradeDetail()
    }
  }
</script>

<style>
  .looseDetail {
  }
</style>